<template>
  <el-date-picker
    v-model="range"
    style="width: 100%"
    clearable
    :type="type"
    :value-format="valueFormat"
    :default-time="['00:00:00', '23:59:59']"
    range-separator="至"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    @change="change"
  ></el-date-picker>
</template>

<script>
export default {
  props: {
    /* 开始时间 */
    start: {
      type: String,
      default: null
    },
    /* 结束时间 */
    end: {
      type: String,
      default: null
    },
    /* 类型 */
    type: {
      type: String,
      default: 'datetimerange'
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    },
    startPlaceholder: {
      type: String,
      default: '开始时间'
    },
    endPlaceholder: {
      type: String,
      default: '结束时间'
    }
  },
  data() {
    return {
      range: []
    };
  },
  watch: {
    start: {
      handler(val) {
        this.initRange();
      },
      immediate: true
    },
    end: {
      handler(val) {
        this.initRange();
      },
      immediate: true
    }
  },
  methods: {
    initRange() {
      if (this.start && this.end) {
        this.range = [this.start, this.end];
      }else{
        this.range = null
      }
    },
    change(e) {
      if (e && e.length >= 2) {
        this.$emit('update:start', e[0]);
        this.$emit('update:end', e[1]);
      } else {
        this.$emit('update:start', null);
        this.$emit('update:end', null);
      }
      this.$emit('change', e);
    }
  }
};
</script>

<style scoped lang="scss"></style>
